<template>
  <div id="pince">
    <scroll-view scroll-y :style="{height: scroll_height + 'px', boxSizing: 'border-box'}" class="u-p-t-20 u-p-l-20 u-p-r-20 u-p-b-0">
      <u-parse :html="list.content"></u-parse>
    </scroll-view>

    <view class="bottom flex-around u-flex bg-fff">
      <div v-if="!btnShow" class="user-btn text-cent col-fff font-30 bg-FF8B37" style="width: 90%">
        <u-button type="primary" :custom-style="customStyle" shape="circle" @click="getExitAccount">登录</u-button>
      </div>
      <!-- 有token就显示 -->
      <block v-if="btnShow">
        <div v-if="isTest" class="user-btn text-cent col-fff font-30 bg-FF8B37">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="registerThirdAccount">开始测评</u-button>
        </div>
        <div v-if="!isTest" class="user-btn text-cent col-fff font-30 bg-CCC">
          <u-button type="primary" :custom-style="customStyle_ccc" shape="circle">开始测评</u-button>
        </div>
        <div v-if="!isTest" class="user-btn text-cent col-fff font-30 bg-FF8B37">
          <u-button type="primary" :custom-style="customStyle" shape="circle" @click="jump('/package/goods/index')">购买测评产品</u-button>
        </div>
        <div v-if="isTest" class="user-btn skip-btn text-cent col-666 font-30">
          <u-button type="primary" :custom-style="customStyle_fff" shape="circle" @click="jump('/package/user/adviser?title=2')">
            联系咨询师(获取报告)
          </u-button>
        </div>
      </block>
    </view>
    <u-modal v-model="testShow" confirm-text="继续" confirm-color="#FF8B37" @confirm="getCont" title="即将进入测评页面">
      <view class="slot-content" style="padding-left: 30upx;padding-right: 30upx">
        <div class="font-26 col-999 pd_t_50">您的测评账号和初始密码为：</div>
        <u-form ref="uForm" label-width="140" :border-bottom="false">
          <u-form-item prop="name" label="账号" :border-bottom="false">
            {{userInfo.email}}
            <view class="wrap" slot="right">
              <view  @click="copy" class="font-24 col-FF8B37 text-cent btn-style">复制</view>
            </view>
          </u-form-item>
          <u-form-item prop="name" label="初始密码" :border-bottom="false">
            123456
          </u-form-item>
        </u-form>
      </view>
    </u-modal>
    <u-modal v-model="testShowMore" confirm-text="关闭" confirm-color="#999999" @confirm="testHide" :show-title="false">
      <view class="slot-content" style="padding-left: 30upx;padding-right: 30upx">
        <div class="row jcenter">
          <u-icon name="info-circle-fill" size="100" color="#ffb20f"></u-icon>
        </div>
        <div class="font-30 col-333 font-b text-cent pd_t_30 pd_b_20">您测评所用设备过多</div>
        <div class="font-26 col-999 pd_b_30 text-cent yh_bd_bottom" @click="call">联系电话：{{callNum}} </div>
      </view>
    </u-modal>
  </div>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";
  import {THEME} from "../../pages/mixins/config.js";

  export default {
    name: "",
    data() {
      return {
        userInfo: {},
        btnShow: false,
        isTest: false,
        testShow: false,
        testShowMore: false,
        list: {},
        isTestTiem: '',
        callNum: '1821888888',
        videoImg: '../../image/videoImg.jpg',
        customStyle: {
          background: THEME.btn_active_bg_color,
          padding: '0 30rpx'
        },
        customStyle_ccc:{
          background: '#ccc',
          padding: '0 30rpx'
        },
        customStyle_fff: {
          background: '#fff',
          padding: '0 30rpx',
          borderColor: '#CCCCCC',
          border: '1px solid #ccc',
          color: '#666'
        }
      }
    },
    computed: {
      scroll_height() {
        let info = uni.getSystemInfoSync()
        let width = info.windowHeight
        let video_width = width - uni.upx2px(110)
        return video_width
      }
    },
    onPullDownRefresh() {
      this.getIntroduce()
      var user = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user');
      if (user && user.token) {
        this.btnShow = true;
        this.buyDetail();
        this.getCurrentUser();
      } else {
        this.btnShow = false;
      }
    },
    onShow() {
      this.getIntroduce()
      var user = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user');
      if (user && user.token) {
        this.btnShow = true;
        this.buyDetail();
        this.getCurrentUser();
      } else {
        this.btnShow = false;
      }
    },
    methods: {
      testHide: function () {
        this.testShow = false;
        this.testShowMore = false;
      },

      buyDetail() {
        request({
          url: '/app/goods/buyDetail'
        }).then(ret => {
          if (ret.data.isBuy) {
            this.isTestTiem = ret.data.endTestDate;
            this.isTest = true;
          } else {
            this.isTest = false;
          }
        })
      },

      registerThirdAccount: function () {
        request({
          url: '/app/index/registerThirdAccount',
          errorFn: true
        }).then(ret => {
          if (ret.data) {
            this.testShow = true;
          }
        }).catch(res => {
          if (res.msg == "当前用户尚未填写邮箱请补全信息以后再进行测评") {
            this.$u.route({
              url: 'package/login/infomation_entry',
              type: 'reLaunch'
            })
          }
        })
      },

      copy() {
        uni.setClipboardData({
          data: this.userInfo.email,
          success: function () {
            TOAST("复制成功")
          }
        });
      },

      getIntroduce() {
        request({
          url: '/app/index/introduce',
          token: true
        }).then(ret => {
          this.list = ret.data;
          uni.stopPullDownRefresh();
        })
      },

      getCont() {
        const res = uni.getSystemInfoSync();
        let user = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
        if (user && user.openId) {
          this.startPince(user.openId, res.model)
        } else {
          var _this = this
          uni.login({
            provider: 'weixin',
            success(loginRes) {
              request({
                url: '/wx/getOpenIdByCode/' + loginRes.code,
                platfom: 'weixin',
                token: true
              }).then(response => {
                let user = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
                if (!user) {
                  user = {}
                }
                user.openId = response.openid
                uni.setStorageSync(process.env.NODE_ENV + 'zbz_user', user);
                _this.startPince(response.openid, res.model)
              })
            }
          })
        }
      },

      startPince(deviceId, model) {
        request({
          url: '/app/report/deviceCheck',
          data: {
            deviceCode: deviceId,
            model: model
          }
        }).then(ret => {
          if (ret.data) {
            this.jump('/package/pince/start')
            this.testShow = false;
            this.testShowMore = false;
          } else {
            this.testShow = false;
            this.testShowMore = true;
            this.callNum = ret.msg;
          }
        })
      },

      openWindow: function (path) {
        $App.openWin({
          name: path,
          url: 'widget://' + path + '.html',
          pageParam: {
            title: '2'
          }
        })

      },

      getExitAccount() {
        var user = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user');
        if (user && user.token) {
          this.btnShow = true;
        } else {
          this.btnShow = false;
          uni.removeStorageSync(process.env.NODE_ENV + 'zbz_user');
          this.jump('/package/login/wx_login')
        }
      },

      getCurrentUser() {
        request({
          url: '/app/userCenter/getLoginUserInfo'
        }).then(res => {
          this.userInfo = res.data
          uni.stopPullDownRefresh();
        })
      },

      jump(path) {
        this.$u.route({
          url: path
        })
      },

      call() {
        uni.makePhoneCall({
          phoneNumber: this.callNum
        });
      }
    },
    onShareAppMessage(res) {}
  }
</script>

<style lang="scss">
  $active_color: #2A6AAA;
  #pince {
    .bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 110upx;
    }
    .user-btn {
      width: 40%;
    }
    .btn-style {
      width: 80upx;
      height: 50upx;
      line-height: 50upx;
      border: 1px solid $active_color;
      border-radius: 27upx;
    }
    .jcenter {
      padding-top: 46upx;
      justify-content: center;
      align-items: center;
    }
  }


</style>
